<template>
	<view class="wrapper">
		<uni-nav-bar title="通讯录" backgroundColor="#f3f3f3">
			<view class="top_right center" slot="right">
				<!-- <image src="../../static/search333.png" mode="aspectFill"></image> -->
				<image src="../../static/add.png" mode="aspectFill" @tap="$open('../index/addFriend')"></image>
			</view>
		</uni-nav-bar>
		<view class="main">
			<view class="top_nav center">
				<view class="tab center colum" @tap="$open('../friend/newFriend')">
					<image src="../../static/contact/conact01.png" mode="aspectFill"></image>
					<view class="f24">新的朋友</view>
					<view class="num center cfff" v-if="newFriend!=0">{{newFriend}}</view>
				</view>
				<view class="tab center colum" @tap="$open('../colleague/colleague')">
					<image src="../../static/contact/conact02.png" mode="aspectFill"></image>
					<view class="f24">我的同事</view>
				</view>
<!-- 				<view class="tab center colum" @tap="$open('./Contacts')">
					<image src="../../static/contact/conact03.png" mode="aspectFill"></image>
					<view class="f24">手机联系人</view>
				</view> -->
				<view class="tab center colum" @tap="$open('../public/public')">
					<image src="../../static/contact/conacnt04.png" mode="aspectFill"></image>
					<view class="f24">公众号</view>
				</view>
				<view class="tab center colum"  @tap="$open('../groupchat/groupList')">
					<image src="../../static/contact/conacnt06.png" mode="aspectFill"></image>
					<view class="f24">群组</view>
				</view>
				<view class="tab center colum" @tap="$open('../friend/Blacklist')">
					<image src="../../static/contact/conacnt07.png" mode="aspectFill"></image>
					<view class="f24">黑名单</view>
				</view>
<!-- 				<view class="tab center colum" @tap="$open('../user/my_equ')">
					<image src="../../static/contact/conacnt08.png" mode="aspectFill"></image>
					<view class="f24">我的设备</view>
				</view> -->
				<view class="tab center colum" @tap="$open('../user/tag')">
					<image src="../../static/contact/conacnt10.png" mode="aspectFill"></image>
					<view class="f24">标签</view>
				</view>
			</view>
			<dlContacts ref="jContacts" topHeight="425" :myList="myList" :showBottom="false" :showRadio="false"></dlContacts>
		</view>
	</view>
</template>

<script>
import md5 from '../../common/md5.min.js';
import dlContacts from '@/components/dl-contacts/dl-contacts.vue';
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
export default {
	data() {
		return {
			myList: [],
			newFriend:0
		};
	},
	onPullDownRefresh() {
		this.getFriendList();
	},
	onShow() {
		this.newFriend=uni.getStorageSync('newList').length || 0
		this.getFriendList();
	},
	methods: {
		getFriendList() {
			const that = this;
			this.$ajax(this.apiList.friendsList, {
				userId: uni.getStorageSync('userinfo').userId
			}).then(res => {
				this.myList = res.data;
				setTimeout(function() {
					that.$refs.jContacts.show();
				}, 300);
			});
		}
	},
	components: { uniNavBar, dlContacts }
};
</script>

<style lang="scss">
.wrapper {
	overflow: hidden;
	padding-bottom: 100rpx;
}
.top_nav {
	background: #ffffff;
	flex-wrap: wrap;
	justify-content: space-between;
	height: 335rpx;
	.tab {
		margin: 19rpx 15rpx;
		width: 130rpx;
		position: relative;
		.num {
			position: absolute;
			width: 37rpx;
			height: 37rpx;
			background: rgba(255, 53, 67, 1);
			border-radius: 50%;
			top: 10rpx;
			right: 10rpx;
		}
	}
	image {
		width: 76rpx;
		height: 76rpx;
		border-radius: 50%;
		margin-bottom: 20rpx;
	}
}
page {
	background: #f3f3f3;
}
.top_right image {
	width: 32rpx;
	height: 32rpx;
	margin-left: 40rpx;
}
</style>
